<template>
    <div>
        <el-container class="common-layout">
            <el-main>
                <div class="divs">
                    <span class="title">
                        <el-icon>
                            <House />
                        </el-icon>
                        基础资料/货物管理/<span style="color: #0098FF;">编辑货物</span>
                    </span>
                </div>
                <p style="padding-right: 1080px;"><strong style="color: #006EFF;">|</strong>&nbsp;&nbsp;基础信息</p>
                <el-form :model="form" label-width="auto" ref="refform" :rules="result">
                    <div
                        style="background-color: #fff;padding: 10px;text-align: center;border-radius: 10px;width: 1100px;margin-left: 35px;">
                        <el-row :gutter="20">
                            <el-col :span="8">
                                <el-form-item label="货物名称:" prop="Cg_name">
                                    <el-input v-model="form.Cg_name" placeholder="请输入内容" clearable />
                                </el-form-item>
                            </el-col>
                            <el-col :span="8">
                                <el-form-item label="长(m):">
                                    <el-input v-model="form.Cg_length" placeholder="请输入内容" clearable />
                                </el-form-item>
                            </el-col>
                            <el-col :span="8">
                                <el-form-item label="宽(m):">
                                    <el-input v-model="form.Cg_width" placeholder="请输入内容" clearable />
                                </el-form-item>
                            </el-col>
                        </el-row>
                        <el-row :gutter="20">
                            <el-col :span="8">
                                <el-form-item label="高(m):">
                                    <el-input v-model="form.Cg_height" placeholder="请输入内容" clearable />
                                </el-form-item>
                            </el-col>
                            <el-col :span="8">
                                <el-form-item label="体积(m³):">
                                    <el-input v-model="form.Cg_volume" placeholder="请输入内容" clearable />
                                </el-form-item>
                            </el-col>
                            <el-col :span="8">
                                <el-form-item label="重量(kg):">
                                    <el-input v-model="form.Cg_weight" placeholder="请输入内容" clearable />
                                </el-form-item>
                            </el-col>
                        </el-row>
                        <el-row :gutter="20">
                            <el-col :span="8">
                                <el-form-item label="价值(元):">
                                    <el-input v-model="form.Cg_value" placeholder="请输入内容" clearable />
                                </el-form-item>
                            </el-col>
                            <el-col :span="8">
                                <el-form-item label="计量单位:">
                                    <el-select v-model="form.Cg_unit" placeholder="请选择">
                                        <el-option v-for="item in tableDataType" :key="item.value"
                                            :label="item.dict_label" :value="item.dict_label" />
                                    </el-select>
                                </el-form-item>
                            </el-col>
                            <el-col :span="8">
                                <el-form-item label="状态:">
                                    <el-switch v-model="form.Cg_status" inline-prompt size="large" />
                                </el-form-item>
                            </el-col>
                        </el-row>
                        <el-row :gutter="20">
                            <el-col :span="16">
                                <el-form-item label="备注信息:">
                                    <el-input v-model="form.Cg_remarks" placeholder="请输入内容" clearable />
                                </el-form-item>
                            </el-col>
                        </el-row>
                    </div>
                    <div style="height: 50px;"></div>
                    <div class="button">
                        <el-form-item>
                            <el-button>取消</el-button>
                            <el-button type="primary" @click="Update">保存</el-button>
                        </el-form-item>
                    </div>
                </el-form>
            </el-main>
        </el-container>
    </div>
</template>

<script>
import { onMounted, ref, reactive } from 'vue'
import axios from 'axios';
import { ElMessage, ElMessageBox } from 'element-plus'
import { Plus } from '@element-plus/icons-vue';
import { Upload } from 'element-plus';
import { useRouter,useRoute } from "vue-router";
import $http from '@/axios/base.js';
export default {
    setup() {
        let router = useRouter();
        let route=useRoute();
        let id=ref('');

        let form = reactive({
            Cg_id: '',  //货物ID
            Cg_name: '',  //货物名称
            Cg_length: '',  //长
            Cg_width: '',  //宽
            Cg_height: '',  //高
            Cg_volume: '',  //体积
            Cg_weight: '',  //重量
            Cg_value: '',  //价值
            Cg_unit: '',  //计量单位
            Cg_status: false,  //货物状态
            Cg_remarks: '',  //备注信息
            Crete_by: sessionStorage.getItem("empname"),  //创建人
            Crete_time: '',  //创建时间
            Update_by: '',  //最后修改人
            Update_time: '2014-02-02',  //最后修改时间
            Is_del: 0,  //删除标识（0：未删除，1：删除）
        })

        let tableDataType = ref([]);   //计量单位
        let refform=ref(null);

        onMounted(() => {
            id.value=route.query.id;
            showtype();
            show();
        })

        const result = reactive({
            Cg_name:[
                {required: true, message: '货物名称不能为空', trigger: 'blur'}
            ]
        })

        function showtype() {   //订单下拉框下拉框
            $http.get("http://localhost:5261/api/Sys_Dict_data/GetSys_Dict_Datas", {
                params: {
                    type:"Mea_unit"
                }
            }).then((res) => {
                tableDataType.value = res;
                console.log(tableDataType.value)
            }).catch((err) => {
                console.log("错误:" + err);
            })
        }

        function show(){
             $http.get(`http://localhost:5261/api/Cargo_ment/cargo_Ments_id/${id.value}`).then((res)=>{
                form.Cg_id=res[0].cg_id;
                form.Cg_name=res[0].cg_name;
                form.Cg_length=res[0].cg_length;
                form.Cg_width=res[0].cg_width;
                form.Cg_height=res[0].cg_height;
                form.Cg_volume=res[0].cg_volume;
                form.Cg_weight=res[0].cg_weight;
                form.Cg_value=res[0].cg_value;
                form.Cg_unit=res[0].cg_unit;
                if(res[0].cg_status==1){
                    form.Cg_status=true;
                }else{
                    form.Cg_status=false;
                }
                form.Cg_remarks=res[0].cg_remarks;
                form.Crete_by=res[0].crete_by;
                form.Crete_time=res[0].crete_time;
                form.Update_by=res[0].update_by;
                form.Update_time=res[0].update_time;
                form.Is_del=res[0].is_del;
             })
        }

        function Update() {   //修改
            refform.value.validate((valid) => {
                if (valid) {
                    if(form.Cg_status==true){
                        form.Cg_status=1
                    }else{
                        form.Cg_status=0
                    }
                    if(form.Cg_volume==""){
                        form.Cg_volume=0;
                    }
                    if(form.Cg_length==""){
                        form.Cg_length=0;
                    }
                    if(form.Cg_width==""){
                        form.Cg_width=0;
                    }
                    if(form.Cg_height==""){
                        form.Cg_height=0;
                    }
                    if(form.Cg_weight==""){
                        form.Cg_weight=0;
                    }
                    if(form.Cg_value==""){
                        form.Cg_value=0;
                    }
                    form.Update_time = new Date().toISOString().slice(0, 10).toString();
                    form.Update_by=sessionStorage.getItem("empname");
                    $http.put("http://localhost:5261/api/Cargo_ment/Update", form).then((res) => {
                        if (res) {
                            ElMessage.success("修改成功！");
                            router.push('/HWGL');
                        } else {
                            ElMessage.success("修改失败！");
                        }
                    })
                }else{
                    ElMessage.warning("请填写完整数据！");
                }
            })

        }

        return {
            form,
            tableDataType,
            showtype,
            Plus,
            Update,
            result,
            refform
        }
    }
}
</script>

<style scoped>
.common-layout {
    /* box-shadow: 0px 15px 25px rgba(0, 0, 0, 0.5); */
    background-color: #F5F9FF;
    height: 700px;
    width: 1250px;
    margin: auto;
    padding: auto;
    /* margin: 50px; */
    /* display: flex;
    align-items: center; */
}

.title {
    padding-right: 930px;
    padding-top: 20px;
}

.el-row {
    margin-bottom: 20px;
}

.el-row:last-child {
    margin-bottom: 0;
}

.el-col {
    border-radius: 4px;
}

.grid-content {
    border-radius: 4px;
    min-height: 36px;
    background-color: aqua;
}

.avatar-uploader .el-upload {
    border: 1px dashed var(--el-border-color);
    border-radius: 6px;
    cursor: pointer;
    position: relative;
    overflow: hidden;
    transition: var(--el-transition-duration-fast);
}

.avatar-uploader .el-upload:hover {
    border-color: var(--el-color-primary);
}

.el-icon.avatar-uploader-icon {
    font-size: 28px;
    color: #8c939d;
    width: 178px;
    height: 100px;
    text-align: center;
}

.avatar-uploader .avatar {
    width: 178px;
    height: 178px;
    display: block;
}

.button {
    padding-right: 37px;  
    margin-top: 20px;
    height: 50px;
    position: fixed;
    /* 固定位置 */
    top: auto;
    /* 距离顶部20像素 */
    right: 70px;
    /* 距离右侧20像素 */
    bottom: 20px;
    /* 底部自动 */
    left: auto;
    /* 左侧自动 */
    z-index: 1000;
    /* 确保它在其他内容之上 */

}
</style>